import React from 'react';
import {Column} from '@ant-design/plots';
import {Card} from "antd";
import useAddressData from "@/hooks/get_address_data.ts";

const Address: React.FC = () => {
    const {addressData} = useAddressData()
    const config = {
        data: addressData,
        xField: 'address',
        yField: 'value',
        slider: {
            x: {
                values: [0.1, 0.5],
            },
        },
    };

    return (
        <Card
            title={'用户地区分布统计'}
            style={{
                width: '100%',
                height: '90vh',
            }}
        >

            <div style={{width: '85vw', height: '80vh'}}>
                <Column {...config} />
            </div>

        </Card>
    )

}

export default Address;